<template>
  <a-modal
    :width="width"
    :visible="visible"
    :footer="null"
    :closable="false"
    cancelText="关闭"
    @cancel="visible = false"
  >
    <div class="header" slot="title">
      <div>{{ title }}</div>
      <div><a @click="refeshClick">刷新</a><a-icon type="close" @click="visible = false" /></div>
    </div>
    <a-spin :spinning="confirmLoading">
    <base-info :orderInfo="orderInfo" :buyInfo="buyInfo"></base-info>
    <commodity-info :goodInfos="goodInfos"></commodity-info>
    <transaction-info :tradeInfo="tradeInfo" :buyInfo="buyInfo"></transaction-info>
    <tabbar-info :orderInfo="orderInfo"></tabbar-info> 
    </a-spin>
  </a-modal>
</template>
<script>
import BaseInfo from '../components/baseInfo.vue' //基础信息
import commodityInfo from '../components/commodityInfo.vue' //商品信息
import transactionInfo from '../components/transactionInfo.vue' //交易信息
import tabbarInfo from '../components/tabbarInfo.vue'
import { getAction } from '@/api/manage'
export default {
  name: 'AmzOrderInfoDetailModal', //订单详情
  components: { BaseInfo, commodityInfo, transactionInfo, tabbarInfo },
  data() {
    return {
      title: '订单详情',
      width: 1200,
      visible: false,
      disableSubmit: false,
      id:'',
      orderInfo: {}, //订单信息
      goodInfos: {}, //商品信息
      buyInfo: {}, //买家信息
      tradeInfo: {}, //交易信息
      confirmLoading:false,
      url: {
        queryById: '/oms/order/amzOrderInfo/queryById',
        queryByOrderId: '/oms/order/amzOrderBuyerInfo/queryByOrderId',
        queryTradeInfo: '/oms/order/amzOrderInfo/queryTradeInfo',
      },
    }
  },

  methods: {
    showModal(record) {
      this.id = record.id
      this.getAmzOrderInfo()
      this.visible = true
    },
    //手动刷新
    refeshClick() {
       this.getAmzOrderInfo()
    },
    //获取订单信息
    getAmzOrderInfo() {
      this.confirmLoading = true
      getAction(this.url.queryById, { id:this.id }).then((res) => {
        if (res.success) {
          let { goodInfos, ...orderInfo } = Object.assign({}, res.result)
           //订单信息
          this.orderInfo = orderInfo   
           //商品信息
          this.goodInfos = {
            ...{ goodInfos: res.result.goodInfos },
            ...orderInfo,
          }
          this.getAmazonDetail(res.result.orderId)
          this.getAmazonQueryTradeInfo(res.result.orderId)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(()=>{
        this.confirmLoading = false
      })
    },
    //获取买家信息
    getAmazonDetail(orderId) {
      getAction(this.url.queryByOrderId, { orderId }).then((res) => {
        if (res.success) {
          this.buyInfo = Object.assign({}, res.result)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //获取交易信息
    getAmazonQueryTradeInfo(orderId) {
      getAction(this.url.queryTradeInfo, { orderId }).then((res) => {
        if (res.success) {
          this.tradeInfo = Object.assign({}, res.result)
          this.tradeInfo.currencyCode = this.orderInfo.currencyCode
        } else {
          this.$message.warning(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.header{
  display: flex;
  justify-content: space-between;
  div:nth-child(2){
    a{
      font-size: 14px;
      margin-right: 20px;
    }
  }
}
/deep/.ant-modal-body {
  padding: 10px;
}
</style>